<template>
  <div class="container">
    <div v-if="orderId" class="publish-icon">
      <img :src="defaultIcon" alt="" @click="$emit('openChart')">
    </div>
    <div v-if="data" :gutter="5" type="flex" class="publish-data-container">
      <template v-for="(item) in list">
        <div v-if="hasKey(data, item.key)" :span="8" :key="item.key" class="item">
          <!-- <div class="img"><img v-if="item.icon" :src="item.icon" alt=""></div> -->
          <div class="label">{{ item.label }}：</div>
          <el-tooltip v-if="data[item.key] || data[item.key] === 0" :open-delay="1000" placement="top">
            <div slot="content">{{ item.label }}:{{ data[item.key] }}</div>
            <div class="text">{{ data[item.key] | bigNumber }}</div>
          </el-tooltip>
          <div v-else class="text">--</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import defaultIcon from '@/assets/lookData.png';
import lookIcon from '@/assets/orderlist/look.png';
import readIcon from '@/assets/orderlist/read.png';
import shareIcon from '@/assets/orderlist/share.png';
import commentIcon from '@/assets/orderlist/comment.png';
import likeIcon from '@/assets/orderlist/like.png';
import collectIcon from '@/assets/orderlist/collect.png';

export default {
  name: 'PublishData',
  filters: {
    bigNumber: (num) => {
      let formatNum = Math.abs(num);
      const sign = Math.sign(num);
      // 参数为正数，返回+1；
      // 参数为负数，返回-1；
      // 参数为 0，返回0；
      // 参数为-0，返回-0;
      // 其他值，返回NaN。
      if (formatNum) {
        if (formatNum >= 1000000000000) {
          formatNum = (formatNum / 1000000000000).toFixed(2) + '万亿';
        } else if (formatNum >= 100000000) {
          formatNum = (formatNum / 100000000).toFixed(2) + '亿';
        } else if (formatNum >= 10000) {
          formatNum = (formatNum / 10000).toFixed(2) + '万';
        }
        return sign === -1 ? `-${formatNum}` : formatNum;
      } else {
        return num;
      }
    }
  },
  props: {
    data: {
      type: Object,
      default: null
    },
    plateform: {
      type: String,
      default: ''
    },
    orderId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      defaultIcon,
      list: [
        { icon: likeIcon, key: 'like', label: '点赞' },
        { icon: commentIcon, key: 'comment', label: '评论' },
        { icon: readIcon, key: 'read', label: '阅读' },
        { icon: shareIcon, key: 'share', label: '转发' },
        { icon: collectIcon, key: 'collect', label: '收藏' },
        { icon: lookIcon, key: 'look', label: '在看' }
      ]
    };
  },
  methods: {
    hasKey(obj, key) {
      return Object.hasOwnProperty.call(obj, key);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
}
.publish-data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .label {
      font-size: 14px;
    }
    .text {
      font-size: 14px;
      color: #333333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .img {
      display: flex;
      align-items: center;
      height: 100%;
    }
    img {
      width: 16px;
    }
  }
}

.publish-icon {
  margin-right: 10px;
  height: 20px;
  display: flex;
  align-items: center;
  img {
    cursor: pointer;
    width: 14px;
    height: 14px;
  }
}
</style>
